<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>购买记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="1.5" style="margin-top:10px ">漫画名:</el-col>
        <el-col :span="4">
          <el-input clearable v-model="resourcename" @keyup.enter.native="getBuyList" @clear="getBuyList"></el-input>
        </el-col>
        <el-col :span="1.5" style="margin-top:10px ">购买人:</el-col>
        <el-col :span="4">
          <el-input   clearable v-model="username" @keyup.enter.native="getBuyList" @clear="getBuyList"></el-input>
        </el-col>
        <el-button type="primary" icon="el-icon-search" @click="getBuyList" style="margin-left: 30px">搜索</el-button>
      </el-row>
      <el-table :data="buyList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="购买人" prop="username"></el-table-column>
        <el-table-column label="章节id" prop="sectionId"></el-table-column>
        <el-table-column label="封面">
          <template slot-scope="scope1">
            <img :src="imgPath+scope1.row.resourceId+'/'+scope1.row.cover" style="width: 50px; height: 50px">
          </template>
        </el-table-column>
        <el-table-column label="详情">
          <template slot-scope="scope">
            漫画名:{{ scope.row.resourceName}} <p></p>
            章节名:{{ scope.row.sectionName }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="removeBuyById(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[4, 8, 12, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgPath : this.$baseUrl.imgUrl+"Imgs/resource/",
      editDialogVisible: false,
      pageNum: 1,
      pageSize: 4,
      buyList: [],
      total: 0,
      resourcename:"",
      username:"",
      cover:"",
    };
  },
  methods: {
    async removeBuyById(row) {
      if (confirm("确认删除吗？")) {
        let url = this.$baseUrl.baseUrl + "buyDetail/removeDetail" ;
        this.$axios.get(url,{
          params:{
            userId:row.userId,
            sectionId:row.sectionId
          }
        }).then((res) => {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.getBuyList();
          } else {
            alert(res.data.msg);
          }
        })
      }
    },
  
    getBuyList() {
      let url = this.$baseUrl.baseUrl + "buyDetail/initBuyDetail";
      this.$axios.get(url,{
        params:{
          resourcename:this.resourcename,
          username:this.username,
          now:this.pageNum,
          size:this.pageSize
        }
      }).then(res =>{
        if(res.data.code == 200){
          this.buyList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
          this.prePage = res.data.data.prePage;
          this.nextPage = res.data.data.nextPage;
          this.pages = res.data.data.pages;
        }else{
          alert(res.data.msg);
        }
      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getBuyList();
    },
    handleCurrentChange(newPage) {
      this.pageNum=newPage;
      this.getBuyList();
    },
  },
  created() {
    this.getBuyList();
  }
};
</script>
<style lang="less" scoped>
</style>